<template>
  <div class="out">
    <div class="left">
      <img :src="`${user.uheader}`" style="width: 150px;height: 150px;margin: 6%;border-radius: 5px" alt=""/>
      <input type="file"
             id="avatarFile"
             style="display: none"
             accept="image/png, image/jpeg, image/gif, image/jpg"
             @change="showAvatar">
      <el-button size="mini" onclick="document.getElementById('avatarFile').click()">上传头像<i
          class="el-icon-upload el-icon--right"></i></el-button>
    </div>
    <div class="right">
      <el-form v-model="user">
        <el-form-item label="昵称:" label-width="15%">
          <el-input v-model="user.uname"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" label-width="15%">
          <el-input v-model="user.uphone"></el-input>
        </el-form-item>
        <el-form-item label="性别:" label-width="15%">
          <el-radio v-model="user.ugender" label="男">男</el-radio>
          <el-radio v-model="user.ugender" label="女">女</el-radio>
          <el-radio v-model="user.ugender" label="未知">未知</el-radio>
        </el-form-item>
        <el-form-item label="地址:" label-width="15%">
          <el-input type="textarea" v-model="user.uadress" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
<!--          <el-button size="small" @click="doReset()">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import requests from "@/api/request";

export default {
  name: "ShowInfo",
  data() {
    return {
      user: null,
      avatarFile: null,
    }
  },
  methods: {
    async showAvatar() {
      let file = document.getElementById('avatarFile').files[0]
      let formData = new FormData();
      formData.append('file', file)
      // this.avatarUrl = window.URL.createObjectURL(file)//预览功能
      const promise = await this.$baseApi.callPostMethod("uploadImg", formData);
      if (promise.data.code === 200) {
        this.user.uheader=promise.data.data
      } else {
        this.$message.error(this.promise.msg)
      }
    },
    async onSubmit() {
      const promise = await this.$baseApi.callPostMethod("updateInfo", this.user);
      if (promise.data.code === 200) {
        this.$store.state.user=promise.data.data
        this.$message.success("更新成功！");
      } else {
        this.$message.error(this.promise.msg)
      }
    },
    doReset() {

    }
  },
  mounted() {
    this.user = this.$store.state.user
  }

}
</script>

<style scoped>
.out {
  display: flex;
  justify-content: center;
  align-items: flex-start;

}

.avatar {
  margin: 8%;
}

.left {
  flex: 0 0 30%;
  /*border: 1px solid red;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.right {
  flex: 0 0 65%;
  margin: 3%;
  text-align: left;
  /*border: 1px solid black;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
}
</style>